import React from 'react';
import { Button, Modal } from 'antd';
import { WeaTop, WeaTab, WeaBrowser,WeaUpload,WeaDialog ,WeaLocaleProvider} from 'ecCom';
import { observer, inject } from 'mobx-react';
import TaskViewPath from './path';
import './index.less';
import TaskViewPage from './page';
import TaskViewLog from './log';
import renderNoRight from '../../../utils/renderNoRight';
import { left } from '../../../apis/pathTemplate';
const getLabel = WeaLocaleProvider.getLabel;

@inject('edcTaskViewStore')
@observer
export default class TaskView extends React.Component {
    componentDidMount() {
        const { edcTaskViewStore: store, location: { query } } = this.props;
        store.init(query);
    }
    getButtons = () => {
        const { edcTaskViewStore: store } = this.props;
        const buttons = store.canSubmit ? [
            store.task.hasSaveBtn && <Button onClick={store.save} type="primary">{getLabel(30986,'保存')}</Button>,
            <Button onClick={store.submit} type="primary">{getLabel(502502,'提交')}</Button>,
            store.task.hasDistributeBtn && <Button onClick={this.issue} type="primary">{getLabel('33694','分发')}</Button>,
        ] : [];
        store.canSubmit && store.hasChild && store.task.hasCoverBtn &&buttons.push(<Button onClick={this.resetCollect} type="primary">{"覆盖"}</Button>)
        if (store.canUndo && store.task.hasUndoBtn) {
            buttons.push(<Button onClick={this.undo} type="primary">{getLabel('32025','撤回')}</Button>)
        }
        // 联合上报 且 是不在当前节点，可以使用强制收集
        if (store.reportType && !store.canSubmit && store.task.hasCollectBtn) {
            buttons.push(<Button onClick={this.forcedCollect} type="primary">强制收集</Button>)
        }
        //dataTable改造,隐藏导入导出
        //store.tabs.length === 3 && store.task.hasExportBtn && buttons.push(<Button onClick={store.exportExcel} type="primary">{getLabel(502294,'导出')}</Button>);
        //store.canSubmit ? (store.task.hasImportBtn ? buttons.push(<Button onClick={(bool) => store.setVisible(bool)} type="primary">{getLabel('502835','导入数据')}</Button>) : "") :"";
        return buttons;
    }
    issue = () => {
        if (this.browser) {
            this.browser.openModal();
        }
    }
    undo = ()=>{
        const { edcTaskViewStore: store, location: { query } } = this.props;
        store.undo(query);
    }
    forcedCollect = () => {
        const { edcTaskViewStore: store, location: { query } } = this.props;
        store.forcedCollect(query);
    }
    resetCollect = () => {

        Modal.confirm({
            title: '覆盖',
            content: <span>
              {'你已保存过数据，若获取最新数据，'}
              <br/>
              <span style={{color:'#f5222d'}}>{getLabel(504079, '其对应的数据也会被清除，并无法恢复')}</span>。
              <br />
              {'你确定要覆盖吗？'}
            </span>,
            onOk: () => {
                const { edcTaskViewStore: store, location: { query } } = this.props;
                store.resetCollect(query);
            }
          });
    }
    
    render() {
        const { edcTaskViewStore: store, location: { query } } = this.props;
        if (store.noRight) {
            return renderNoRight();
        }
        return (
            <div className={`edc-task-view ${store.selectedTab}`}>
                <WeaTop
                    title={store.title}
                    iconBgcolor="#1a57a0"
                    icon={<i className="icon-coms02-Data-center" />}
                    buttons={this.getButtons()}
                    loading={store.loading}
                >
                    <WeaTab
                        datas={store.tabs.slice()}
                        keyParam="key"  //主键
                        selectedKey={store.selectedTab}
                        onChange={store.onChangeTab}
                    />
                    <div className="edc-task-view-content">
                        <TaskViewPage store={store} />
                        {store.selectedTab === 'path' && <TaskViewPath store={store} />}
                        {store.selectedTab === 'log' && <TaskViewLog store={store} />}
                    </div>
                    <WeaBrowser
                        ref={ref => this.browser = ref}
                        isSingle={false}
                        type={17}
                        customized={true}
                        onChange={store.issue}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        title={getLabel('33694','分发')}
                    />
                    <WeaDialog
                        onCancel={() => store.setVisible(false)}
                        title={store.uploadtitle}
                        visible={store.visible}
                        icon="icon-coms02-Data-center"
                        iconBgcolor="#1a57a0"
                        style={{width: 520, height: 250}}
                    >
                    <div style ={{paddingLeft:20, padding:"24px"}}>
                    <div className="text-elli wea-f13" style={{lineHeight:"32px"}}>{getLabel('502836','下载相应的Excel模板')}：
                    <a onClick={store.exportExcel} type="primary">{store.excel.title}</a></div>
                    <div className="text-elli wea-f13" style={{lineHeight:"32px"}}>{getLabel('502837','上传数据文件')}（Excel）：</div>
                    <WeaUpload
                        uploadUrl="."
                        category='string'
                        maxUploadSize={0}
                        maxFilesNumber={1}
                        limitType='xlsx'
                        autoUpload={false}
                        getShowListDatas={store.getShowListDatas}
                    >
                    <Button type="primary">{getLabel('32935','导入')}</Button>
                    
                    </WeaUpload>
                    </div>
                    </WeaDialog>
                    <input name="key" type="hidden" value={query.taskid}></input>
                </WeaTop>
            </div>
        )
    }
}